<template>
    <div>
        <el-button type="primary" icon="el-icon-edit" @click="show = true">添加</el-button>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            prop="id"
            label="ID"
            width="180">
            </el-table-column>
            <el-table-column
            prop="CourseName"
            label="商品"
            width="180">
            </el-table-column>
            <el-table-column
            prop="description"
            label="价格">
            </el-table-column>
            <el-table-column
            prop="type"
            label="库存">
            </el-table-column>
            <el-table-column
            label="操作">
                <template slot-scope="scope">
                    <el-popconfirm
                        title="确定删除吗？"
                        @confirm="deleteItem(scope.$index)"
                        >
                        <el-button slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="增加商品" :visible.sync="show">
            <el-form :model="form">
                <el-form-item label="ID" label-width="120px">
                    <el-input v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品" label-width="120px">
                    <el-input v-model="form.CourseName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" label-width="120px">
                    <el-input ref="value" v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存" label-width="120px">
                    <el-input v-model="form.type" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>

export default ({
    name:'from',
    data(){
        return{
            show:false,
            form:{},
            tableData: [
                {
                id: '1',
                CourseName:'第一专业',
                description:'web',
                type:'程序元家园',
                }, 
                {
                    id: '2',
                    CourseName:'第二专业',
                    description:'java',
                    type:'后端之家',
                }, 
                {
                    id: '3',
                    CourseName:'第三专业',
                    description:'历史',
                    type:'0000',
                }, 
            ]
        }
    },
    watch:{
    tableData:{
        handler (newVal){
            localStorage.setItem('list',JSON.stringify(newVal))
        },
        deep:true,
    }
},
created(){
    let arr = JSON.parse(localStorage.getItem('list'));
    this.tableData = arr&&arr.length? arr:[]
},
methods:{
    deleteItem(index){
        this.tableData.splice(index,1)
    },
    add(){
        this.show = !this.show;
        this.tableData.push(JSON.parse(JSON.stringify(this.form)))//深拷贝;
        this.form={};
        console.log(this.$refs.value.value)
    }
}
})
</script>
<style lang="scss" scoped>
    
</style>
